<template>
  <div class="overview-report">
    <!-- 核心指标 -->
    <el-row :gutter="20" class="kpi-cards">
      <el-col :span="6">
        <div class="kpi-card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
          <div class="kpi-icon">
            <el-icon :size="32"><UserFilled /></el-icon>
          </div>
          <div class="kpi-content">
            <div class="kpi-label">会员总数</div>
            <div class="kpi-value">{{ totalMembers.toLocaleString() }}</div>
            <div class="kpi-change">
              <el-icon><TrendCharts /></el-icon>
              <span>+{{ newMembersRate }}%</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="kpi-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
          <div class="kpi-icon">
            <el-icon :size="32"><Wallet /></el-icon>
          </div>
          <div class="kpi-content">
            <div class="kpi-label">消费总额</div>
            <div class="kpi-value">¥{{ totalConsumption.toLocaleString() }}</div>
            <div class="kpi-change">
              <el-icon><TrendCharts /></el-icon>
              <span>+{{ consumptionGrowth }}%</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="kpi-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
          <div class="kpi-icon">
            <el-icon :size="32"><Star /></el-icon>
          </div>
          <div class="kpi-content">
            <div class="kpi-label">活跃会员</div>
            <div class="kpi-value">{{ activeMembers.toLocaleString() }}</div>
            <div class="kpi-change">
              <el-icon><TrendCharts /></el-icon>
              <span>{{ activeMembersRate }}%</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="kpi-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
          <div class="kpi-icon">
            <el-icon :size="32"><ShoppingCart /></el-icon>
          </div>
          <div class="kpi-content">
            <div class="kpi-label">客单价</div>
            <div class="kpi-value">¥{{ avgOrderValue }}</div>
            <div class="kpi-change">
              <el-icon><TrendCharts /></el-icon>
              <span>+{{ avgOrderGrowth }}%</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 趋势图表 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>会员增长趋势</span>
          </template>
          <div class="chart-container" ref="memberTrendChart"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>消费趋势分析</span>
          </template>
          <div class="chart-container" ref="consumptionTrendChart"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 会员等级分布 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>会员等级分布</span>
          </template>
          <div class="chart-container" ref="levelDistributionChart"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>会员活跃度分析</span>
          </template>
          <div class="chart-container" ref="activityChart"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据列表 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <span>会员数据明细</span>
      </template>
      <el-table :data="memberData" border stripe>
        <el-table-column prop="date" label="日期" width="120" />
        <el-table-column prop="newMembers" label="新增会员" width="120">
          <template #default="{ row }">
            <el-tag>{{ row.newMembers }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="activeMembers" label="活跃会员" width="120">
          <template #default="{ row }">
            <el-tag type="success">{{ row.activeMembers }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="consumption" label="消费金额" width="150">
          <template #default="{ row }">
            ¥{{ row.consumption.toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column prop="orders" label="订单数" width="100" />
        <el-table-column prop="avgOrderValue" label="客单价" width="120">
          <template #default="{ row }">
            ¥{{ row.avgOrderValue }}
          </template>
        </el-table-column>
        <el-table-column prop="totalMembers" label="累计会员" width="120" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { UserFilled, Wallet, Star, ShoppingCart, TrendCharts } from '@element-plus/icons-vue'
import * as echarts from 'echarts'

const props = defineProps({
  dateRange: {
    type: Array,
    default: () => []
  }
})

// 核心指标
const totalMembers = ref(125678)
const newMembersRate = ref(12.5)
const totalConsumption = ref(15678900)
const consumptionGrowth = ref(18.3)
const activeMembers = ref(45678)
const activeMembersRate = ref(36.3)
const avgOrderValue = ref(286)
const avgOrderGrowth = ref(8.5)

// 数据明细
const memberData = ref([
  { date: '2024-01-01', newMembers: 234, activeMembers: 5678, consumption: 567890, orders: 1234, avgOrderValue: 286, totalMembers: 125678 },
  { date: '2024-01-02', newMembers: 189, activeMembers: 5432, consumption: 543210, orders: 1189, avgOrderValue: 282, totalMembers: 125867 },
  { date: '2024-01-03', newMembers: 267, activeMembers: 5890, consumption: 598765, orders: 1345, avgOrderValue: 290, totalMembers: 126134 }
])

const memberTrendChart = ref(null)
const consumptionTrendChart = ref(null)
const levelDistributionChart = ref(null)
const activityChart = ref(null)

onMounted(() => {
  initMemberTrendChart()
  initConsumptionTrendChart()
  initLevelDistributionChart()
  initActivityChart()
})

const initMemberTrendChart = () => {
  const chart = echarts.init(memberTrendChart.value)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['新增会员', '累计会员'] },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
    },
    yAxis: { type: 'value' },
    series: [
      {
        name: '新增会员',
        type: 'bar',
        data: [3450, 3980, 4120, 3890, 4250, 4580, 4890],
        itemStyle: { color: '#667eea' }
      },
      {
        name: '累计会员',
        type: 'line',
        data: [112340, 116320, 120440, 124330, 128580, 133160, 138050],
        itemStyle: { color: '#f5576c' }
      }
    ]
  })
}

const initConsumptionTrendChart = () => {
  const chart = echarts.init(consumptionTrendChart.value)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['消费金额', '客单价'] },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
    },
    yAxis: [
      { type: 'value', name: '消费金额(万元)' },
      { type: 'value', name: '客单价(元)' }
    ],
    series: [
      {
        name: '消费金额',
        type: 'bar',
        data: [156, 178, 189, 165, 198, 212, 234],
        itemStyle: { color: '#4facfe' }
      },
      {
        name: '客单价',
        type: 'line',
        yAxisIndex: 1,
        data: [268, 275, 282, 270, 286, 295, 302],
        itemStyle: { color: '#43e97b' }
      }
    ]
  })
}

const initLevelDistributionChart = () => {
  const chart = echarts.init(levelDistributionChart.value)
  chart.setOption({
    tooltip: { trigger: 'item' },
    legend: { orient: 'vertical', left: 'left' },
    series: [
      {
        name: '会员等级',
        type: 'pie',
        radius: '60%',
        data: [
          { value: 78945, name: '普通会员', itemStyle: { color: '#909399' } },
          { value: 32456, name: '银卡会员', itemStyle: { color: '#c0c0c0' } },
          { value: 12345, name: '金卡会员', itemStyle: { color: '#f5af19' } },
          { value: 1932, name: '钻石会员', itemStyle: { color: '#667eea' } }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  })
}

const initActivityChart = () => {
  const chart = echarts.init(activityChart.value)
  chart.setOption({
    tooltip: { trigger: 'item' },
    legend: { orient: 'vertical', left: 'left' },
    series: [
      {
        name: '活跃度',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        data: [
          { value: 45678, name: '高活跃', itemStyle: { color: '#67c23a' } },
          { value: 38945, name: '中活跃', itemStyle: { color: '#e6a23c' } },
          { value: 26734, name: '低活跃', itemStyle: { color: '#f56c6c' } },
          { value: 14321, name: '沉睡', itemStyle: { color: '#909399' } }
        ]
      }
    ]
  })
}
</script>

<style scoped>
.overview-report {
  padding: 20px 0;
}

.kpi-cards {
  margin-bottom: 20px;
}

.kpi-card {
  padding: 20px;
  border-radius: 12px;
  color: white;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s;
}

.kpi-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.kpi-icon {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-content {
  flex: 1;
}

.kpi-label {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.kpi-value {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 5px;
}

.kpi-change {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  opacity: 0.9;
}

.chart-container {
  height: 350px;
}
</style>

